<template>
  <div class="indexContainer">
    <!-- 头部 -->
    <div class="header">
      <img class="logo" src="../../assets/logo.png" alt="">
      <van-search v-model="value" placeholder="请输入搜索关键词" />
      <van-button class="btn" size="mini" plain hairline type="danger">登录</van-button>
    </div>
    <!-- 导航 -->
    <div class="layer" v-if="selc===1">
      <div class="title">
        <div>全部频道</div>
        <!-- <select name="" id="" @click="changeNav()"></select> -->
        <van-button @click="changeNav(0)">^</van-button>
      </div>
      <div class="list">
        <div class="navItem" size="mini" plain hairline :class="{active:currentId === -1}" @click="changePage(-1)">推荐</div>
        <div class="navItem" :class="{active:currentId ===navName.categoryId }" v-for="navName in navList" :key="navName.categoryId" @click="changePage(navName.categoryId)">
          <div class="btn" size="small" plain hairline>{{navName.categoryName}}</div>
          <!-- <div class="title"></div> -->
        </div>
      </div>
    </div>
    <div class="navWrap" v-if="selc===0">
      <div class="nav">
        <div class="navItem" :class="{active:currentId === -1}" @click="changePage(-1)">推荐</div>
        <div class="navItem" :class="{active:currentId ===navName.categoryId }" v-for="navName in navList" :key="navName.categoryId" @click="changePage(navName.categoryId)">
          <div class="title">{{navName.categoryName}}</div>
        </div>
      </div>
      <div class="trans"></div>
      <van-button class="selc" @click="changeNav(1)">^</van-button>
    </div>

    <!-- 轮播图 -->
    <div class="main" v-show="currentId === -1">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item v-for="focus in home.focusListInfo" :key="focus.id">
          <img :src="focus.picUrl" alt="">
        </van-swipe-item>

      </van-swipe>
      <!-- 图标列表 -->
      <div class="iconList">
        <div class="iconItem" v-for="(icon,index) in home.policyDescListInfo" :key="icon.desc">
          <img class="iconImg" :src="icon.icon" alt="">
          <span class="iconText">{{icon.desc}}</span>
        </div>
      </div>
      <!-- 10个分类列表 -->
      <div class="categoryList">
        <div class="category" v-for="(category,index) in home.kingKongList" :key="category.L1Id">
          <img class="catImg" :src="category.picUrl" alt="">
          <span class="catText">{{category.text}}</span>
        </div>
      </div>
      <!-- 图表 -->
      <div class="discoun" v-for="c1 in cellsList" :key="c1.id">
        <div class="bc">
          <van-swipe class="my-swipe" :autoplay="1000" indicator-color="transparent" :show-indicators="false">
            <van-swipe-item v-for="c2 in c1.itemList">
              <img :src="c2.picUrl" alt="">
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <!-- 三张图片 -->
      <div class="pic">
        <div class="loo" v-for="cell in cellsList1" :key="cell.id">
          <div class="bc" :style="{backgroundImage:'url('+cell.picUrl+')'}">
            <div class="imgItem" v-for="c0 in cell.itemList" :key="c0.id">
              <img :src="c0.picUrl" alt="">
            </div>

          </div>
        </div>
      </div>
      <div class="pageContent">
        <!-- 新人专享 -->
        <div class="newPerson">
          <div class="title">-新人专享礼- </div>
          <div class="imgM">
            <div class="left">
              <div class="text">新人专享礼包</div>
              <img src="//yanxuan.nosdn.127.net/static-union/1648017994dd2933.png" alt="">
            </div>
            <div class="right">
              <div class="top">
                <div class="text">
                  <div>福利社</div>
                  <div class="tag">今日特价</div>
                </div>

                <img src="https://yanxuan-item.nosdn.127.net/bb9025c24057dfb89403055ac5b9f85c.png" alt="">
              </div>
              <div class="bottom">
                <div class="text">
                  <div>新人拼团</div>
                  <div class="tag">一元起包邮</div>
                </div>

                <img src="https://yanxuan-item.nosdn.127.net/4096900eff5679c558311cfc991d07e2.png" alt="">
              </div>

            </div>
          </div>

        </div>
        <!-- 类目推荐 -->
        <div class="hot">
          <div class="title">{{home.categoryHotSellModuleInfo.title}}</div>
          <div class="content">
            <div class="top">
              <div class="item" v-for="cate in categoryListTop" :key="cate.categoryName">
                <span class="itemText">{{cate.categoryName}} </span>
                <img :src="cate.picUrl" alt="">
              </div>
            </div>
            <div class="bottom">
              <div class="item" v-for="cat in categoryListBottom" :key="cat.catgoryName">
                <div class="text">{{cat.categoryName}}</div>
                <img :src="cat.picUrl" alt="">
              </div>

            </div>

          </div>

        </div>
        <!-- 严选众筹 -->
        <div class="scene">
          <div class="item0" :style="{backgroundImage:'url('+home.styleBanner?.picUrl+')'}">
            <div class="title">{{home.styleBanner?.title}}</div>
            <div class="text">{{home.styleBanner?.desc}}</div>
          </div>
          <div class="item1">
            <div class="title">{{home.styleItem?.title}}</div>
            <div class="text">{{home.styleItem?.desc}}</div>
            <div class="imgItem" v-for="(pic,index) in home.styleItem?.picUrlList" :key="index">
              <img :src="pic" alt="">
            </div>
          </div>
        </div>

      </div>

    </div>
    <!-- 分页面 -->
    <Card v-if="currentId !== -1" :currentId="currentId"></Card>
    <!-- 底部 -->
    <div class="footer">
      <button>下载App</button>
      <button>电脑版</button>
      <div>网易公司版权所有 © 1997- <br> 食品经营许可证：JY13301080111719</div>

    </div>

  </div>
</template>
<script lang="ts">
export default {
  name: 'Home'
  // home.categoryList.extra.operationResource.categoryName
};
</script>
<script setup lang="ts">
import { onMounted, watch, ref, computed } from 'vue';
import { useHomeStore } from '../../store/home';
import type { floorListItemModel, itemListModel } from '../../api/api1/home';
import Card from './componets/Card/index.vue';
const home = useHomeStore();
// 获取10个分类列表
const cellsList = computed(() => home.cellsList[0]);
const cellsList1 = computed(() => home.cellsList[1]);
const categoryListTop = computed(() =>
  home.categoryList?.filter((item: [], index: number) => {
    if (index === 0 || index === 1) {
      return item;
    }
  })
);
const categoryListBottom = computed(() =>
  home.categoryList?.filter((item: [], index: number) => {
    if (index !== 0 && index !== 1) {
      return item;
    }
  })
);
const navList = computed(() => home.categoryList?.map((item: any) => item.extra?.operationResource));
const currentId = ref(-1);
// console.log('nav', navList);
const selc = ref(0);
const changeNav = (num: number) => {
  selc.value = num;
};
const changePage = (id: number) => {
  // console.log('00000')
  currentId.value = id;
};
onMounted(async () => {
  await home.getRecommendInfo();
});
</script>

<style lang="scss" scoped>
.indexContainer {
  width: 100vw;
  height: 100%;
  .header {
    display: flex;
    align-items: center;
    padding: 0 15px;
    .logo {
      width: 70px;
      height: 20px;
    }
    .btn {
      width: 40px;
      height: 20px;
      font-size: 12px;
      text-align: center;
      line-height: 20px;
      border-radius: 10%;
    }
  }
  .layer {
    height: 200px;
    // background-color: pink;
    .title {
      padding-top: 15px;
      padding-bottom: 15px;
      padding-left: 20px;
      padding-right: 20px;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
      button {
        font-size: 25px;
        color: gray;
        text-align: center;
        line-height: 30px;
        width: 40px;
        height: 30px;
        border: none;
      }
    }
    .list {
      display: flex;
      flex-wrap: wrap;
      .navItem {
        // display: flex;

        font-size: 11px;
        margin-left: 20px;
        margin-bottom: 20px;
        box-sizing: border-box;
        // border: 1px solid gainsboro;
        width: 70px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
      .active {
        color: red;
        border: 1px solid red;
      }
    }
  }
  .navWrap {
    // display: flex;
    position: relative;
    .nav {
      height: 30px;
      font-size: 14px;
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      position: relative;
      .navItem {
        // float: left;
        flex-shrink: 0;
        width: 70px;
        height: 30px;
        // background-color: pink;
        text-align: center;
        line-height: 30px;
        margin-left: 18px;
        box-sizing: border-box;
        // .title {
        // }
      }
      .active {
        color: red;
      }
    }
    .selc {
      float: right;
      width: 35px;
      height: 30px;
      // font-size: 30px;
      text-align: center;
      position: absolute;
      right: 0;
      top: 0;
      margin-right: 10px;
      border: none;
      background-size: 5px 5px;
      color: gray;
      // background-color: transparent;
    }
    .trans {
      position: absolute;
      right: 40px;
      top: 0;
      width: 20px;
      height: 30px;
      // background-color: white;
      background-image: linear-gradient(to left, white, rgba(255, 0, 0, 0.1));
    }
  }

  .main {
    .my-swipe .van-swipe-item img {
      width: 100%;
      height: 150px;
    }
    .iconList {
      margin-top: 5px;
      height: 16px;
      display: flex;
      justify-content: space-around;
      .iconItem {
        height: 16px;
        display: flex;
        align-items: center;
        .iconImg {
          width: 16px;
          height: 16px;
        }
        .iconText {
          font-size: 12px;
        }
      }
    }
    .categoryList {
      display: flex;
      flex-wrap: wrap;
      .category {
        width: 20%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .catImg {
          width: 55px;
          height: 55px;
          border-radius: 15px;
          margin: 10px 0;
        }
        .catText {
          font-size: 14px;
        }
      }
    }
    .discoun {
      height: 100px;
      .bc {
        // background-image: url('https://yanxuan.nosdn.127.net/static-union/1667560712274a01.gif');
        background-image: url('https://yanxuan.nosdn.127.net/static-union/1667560712274a01.gif');
        background-size: 100% 100%;
        .my-swipe {
          width: 85px;
          margin: 20px;
          img {
            width: 84px;
            height: 84px;
            margin-top: 0px;
            margin-left: 15px;
          }
        }
      }
    }
    .pic {
      // height: 110px;
      display: flex;
      margin: 0 10px;
      .loo {
        width: 115.5px;
        height: 110px;
        margin-right: 5px;
        .bc {
          width: 115.5px;
          height: 110px;
          background-size: 100% 100%;
          .imgItem {
            img {
              width: 70px;
              height: 70px;
              margin: 30px 20px;
            }
          }
        }
      }
    }
    .pageContent {
      margin: 10px;
      .newPerson {
        height: 220px;
        .title {
          text-align: center;
          font-size: 16px;
        }
        .imgM {
          display: flex;
          margin-top: 10px;
          .left {
            background-color: peachpuff;
            width: 170px;
            margin-right: 10px;
            .text {
              font-size: 16px;
              margin: 20px;
            }
            img {
              margin-top: 20px;
              width: 130px;
              height: 130px;
              margin-left: 20px;
            }
          }
          .right {
            width: 170px;
            font-size: 16px;
            .top {
              height: 110px;
              display: flex;
              background-color: pink;
              margin-bottom: 10px;
              .text {
                margin-top: 20px;
                margin-left: 20px;
                .tag {
                  font-size: 8px;
                }
              }
              img {
                width: 100px;
                height: 100px;
              }
            }
            .bottom {
              .text {
                margin-top: 20px;
                margin-left: 20px;
                .tag {
                  font-size: 8px;
                }
              }
              background-color: palegoldenrod;
              height: 110px;
              display: flex;
              img {
                width: 100px;
                height: 100px;
              }
            }
          }
        }
      }
      .hot {
        margin-top: 80px;
        height: 360px;
        .title {
          font-size: 16px;
          margin-bottom: 10px;
          // marg
        }
        .content {
          .top {
            display: flex;
            height: 100px;
            .item {
              background-color: papayawhip;
              width: 180px;
              font-size: 14px;
              margin-right: 10px;
              display: flex;
              // flex-wrap: wrap;
              .itemText {
                height: 20px;
                width: 70px;
                margin-left: 10px;
                margin-top: 30px;
              }
              img {
                width: 100px;
                height: 100px;
              }
            }
          }
          .bottom {
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            .item {
              width: 83px;
              height: 90px;
              margin-right: 5px;
              margin-top: 5px;

              text-align: center;
              background-color: gainsboro;
              .text {
                font-size: 12px;
                text-align: center;
                margin: 10px 0;
              }
              img {
                width: 50px;
                height: 50px;
              }
            }
          }
        }
      }
      .scene {
        margin-top: -20px;
        height: 140px;
        display: flex;
        flex-wrap: wrap;
        font-size: 16px;
        // background-color: palevioletred;
        .item0 {
          background-color: ghostwhite;
          margin-right: 10px;
          .title {
            margin: 10px;
          }
          .text {
            font-size: 12px;
            margin: 10px;
          }
          width: 170px;
          height: 140px;
          background-size: 100% 100%;
        }
        .item1 {
          background-color: ghostwhite;
          width: 170px;
          .title {
            margin: 10px;
          }
          .text {
            font-size: 12px;
            margin: 10px;
          }
          .imgItem {
            float: left;
            // flex-direction: initial;
            // justify-content: space-between;
            height: 70px;
            img {
              display: block;
              margin-left: 10px;
              width: 70px;
              height: 70px;
            }
          }
        }
      }
    }
  }
  .footer {
    background-color: #444444;
    height: 150px;
    width: 100%;
    color: white;
    font-size: 12px;
    text-align: center;

    button {
      margin-top: 20px;
      margin-bottom: 10px;
      height: 100px;
      height: 30px;
      background-color: #444444;
      line-height: 30px;
      text-align: center;
      border: 1px solid white;
    }
  }
}
</style>
